<style>
    /* 根据字数修改 */
    .layui-form-label {
        width: 90px;
    }

    .layui-form-item .layui-input-inline {
        width: 240px;
    }

    .check_box {
        position: absolute;
        left: 10px;
        top: 10px;
    }

    .check_box_img {
        width: 100%;
        height: 208px;
        overflow: hidden;
        position: relative;
    }



    .check_box_img .error_image span {
        position: absolute;
        top: 50%;
        left: 24px;
        -webkit-transform: translateY(-50%);
        transform: translateY(-50%);
        max-width: 220px;
        display: -webkit-box;
        overflow: hidden;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
    }

    .check_box_img .error_image img {
        position: absolute;
        bottom: 0;
        right: 27px;
        width: 160px;
        height: auto;
    }

    .check_box_img .error_image {
        position: relative;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, .02);
        font-weight: 500;
        font-size: 24px;
        color: rgba(0, 0, 0, .45);
    }

    .activeStatus {
        width: 100px;
    }
</style>
<div class="layuimini-container layuimini-page-anim">
    <!-- 用于创建子页面 -->
    <div class="page-create"></div>
    <!-- page-main-create -->
    <!-- 用于显示 隐藏 -->
    <div class="layuimini-main page-main-create">
        <div class="title-row layuimini-title ">
            <div class="title-left">
                <h4><span>市民报事</span></h4>
            </div>
            <div class="title-right">
                <span class="title-right-text">
                    <button type="button" class="layui-btn  layui-btn-sm layui-btn-primary ml-3"
                        lay-on="download">导出</button>
                </span>
            </div>
        </div>

        <div class="section">
            <form class="layui-form" action="" lay-filter="search-form">
                <div class="layui-form-item">
                    <div class="search-box-wrapper">
                        <div class="search-box-body">

                            <div class="layui-inline">
                                <label class="layui-form-label">上报时间</label>
                                <div class="layui-input-inline">
                                    <input type="text" name="datePeriod" autocomplete="off" id="date_period"
                                        class="layui-input" placeholder="请选择">

                                </div>
                            </div>

                            <div class="layui-inline">
                                <label class="layui-form-label">事件类型</label>
                                <div class="layui-input-inline">
                                    <select class="layui-input" lay-append-to="body" placeholder="请选择"
                                        name="businessNames" lay-search>
                                        <option value="1">清扫保洁</option>
                                        <option value="2">绿化养护</option>
                                        <option value="3">设施维护</option>
                                        <option value="4">其他</option>
                                    </select>
                                </div>
                            </div>
                            <div class="layui-inline">
                                <label class="layui-form-label">事件编号</label>
                                <div class="layui-input-inline">
                                    <input type="text" placeholder="请输入" name="nickname" autocomplete="off"
                                        class="layui-input">
                                </div>
                            </div>


                            <div class="layui-inline">
                                <label class="layui-form-label">报事设备</label>
                                <div class="layui-input-inline">
                                    <select class="layui-input" lay-append-to="body" placeholder="请选择"
                                        name="departmentTririgaCodes" lay-search>
                                        <option value="1">中心管理</option>
                                        <option value="2">中心管理/业务支持部</option>
                                        <option value="3">巡查/安全</option>
                                        <option value="4">其他</option>
                                    </select>
                                </div>
                            </div>

                            <div class="layui-inline">
                                <label class="layui-form-label">受理方式</label>
                                <div class="layui-input-inline">
                                    <select class="layui-input" lay-append-to="body" placeholder="请选择"
                                        name="supplierCodes" lay-search>
                                        <option value="1">暂不处理</option>
                                        <option value="2">同步第三方处理</option>
                                        <option value="3">发起工单</option>
                                        <option value="4">误报</option>
                                        <option value="5">重复处理已处理</option>
                                    </select>
                                </div>
                            </div>
                        </div>
                        <div class="search-box-btns">
                            <div class="switch-wrapper" id="toggleFormBtn">
                                <span>展开</span>
                                <i class="layui-icon layui-icon-down" id="toggleIcon"></i>
                            </div>
                            <button type="submit" class="layui-btn layui-btn-sm" lay-submit
                                lay-filter="data-search-btn">查询</button>
                            <button type="reset" class="layui-btn  layui-btn-sm layui-btn-primary">重置</button>
                        </div>
                    </div>
                </div>
            </form>
            <div class="mb-5">
                <button class="layui-btn layui-btn-sm">全部</button>
                <button class="layui-btn layui-btn-sm layui-btn-primary">待处理</button>
                <button class="layui-btn layui-btn-sm layui-btn-primary">处理中</button>
                <button class="layui-btn layui-btn-sm layui-btn-primary">已完成</button>
            </div>

            <div class="flex-between items-center mb-5">
                <div>
                    <span class="mr-5">待处理 207</span>
                    <span class="mr-5">已处理 6417</span>
                    <span class="mr-5">已转单 4491</span>
                    <span class="mr-5">转单率82.81%</span>
                </div>
                <div>
                    <div class="layui-form">
                        <input type="checkbox" name="AAA" title="页面全选">
                    </div>
                </div>
            </div>


            <div class="layui-row layui-col-space20">
                <div class="layui-col-xs6 layui-col-sm6 layui-col-md4">
                    <div class="layui-card solid">
                        <div class="check_box_img">
                            <div class="layui-form check_box">
                                <input type="checkbox" name="AAA">
                            </div>
                            <div class="error_image">
                                <span>设备离线告警</span>
                                <img src="/assets/images/event/img-iot.png">
                            </div>
                        </div>
                        <div class="layui-card-body">
                            <div class="flex justify-between mb-4">
                                <p class="title rl-ellipsis">
                                    2025-07-17 22:04:36北京海淀上地街道项目上地街道记录仪0365（864504040800365）执法仪设备离线告警
                                    <span class="lighter layui-font-12 ml-2">记录仪0365</span>
                                </p>
                                <p class="activeStatus">
                                    待处理
                                </p>
                            </div>
                            <p class="title rl-ellipsis layui-font-12 layui-font-gray">
                                上地街道上地三街辅路金辉科技大厦
                            </p>
                            <div class="flex justify-between mb-4">
                                <div class="layui-font-12 layui-font-gray">
                                    2025-07-17 22:04:36
                                </div>
                                <div>
                                    <button class="layui-btn layui-btn-xs layui-btn-primary px-7"
                                        lay-on="look">查看</button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="layui-col-xs6 layui-col-sm6 layui-col-md4">
                    <div class="layui-card solid">
                        <div class="check_box_img">
                            <div class="layui-form check_box">
                                <input type="checkbox" name="AAA">
                            </div>
                            <div class="error_image">
                                <span>设备离线告警</span>
                                <img src="/assets/images/event/img-iot.png">
                            </div>
                        </div>
                        <div class="layui-card-body">
                            <div class="flex justify-between mb-4">
                                <p class="title rl-ellipsis">
                                    2025-07-17 22:04:36北京海淀上地街道项目上地街道记录仪0365（864504040800365）执法仪设备离线告警
                                    <span class="lighter layui-font-12 ml-2">记录仪0365</span>
                                </p>
                                <p class="activeStatus">
                                    待处理
                                </p>
                            </div>
                            <p class="title rl-ellipsis layui-font-12 layui-font-gray">
                                上地街道上地三街辅路金辉科技大厦
                            </p>
                            <div class="flex justify-between mb-4">
                                <div class="layui-font-12 layui-font-gray">
                                    2025-07-17 22:04:36
                                </div>
                                <div>
                                    <button class="layui-btn layui-btn-xs layui-btn-primary px-7"
                                        lay-on="look">查看</button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="layui-col-xs6 layui-col-sm6 layui-col-md4">
                    <div class="layui-card solid">
                        <div class="check_box_img">
                            <div class="layui-form check_box">
                                <input type="checkbox" name="AAA">
                            </div>
                            <div class="error_image">
                                <span>设备离线告警</span>
                                <img src="/assets/images/event/img-iot.png">
                            </div>
                        </div>
                        <div class="layui-card-body">
                            <div class="flex justify-between mb-4">
                                <p class="title rl-ellipsis">
                                    2025-07-17 22:04:36北京海淀上地街道项目上地街道记录仪0365（864504040800365）执法仪设备离线告警
                                    <span class="lighter layui-font-12 ml-2">记录仪0365</span>
                                </p>
                                <p class="activeStatus">
                                    待处理
                                </p>
                            </div>
                            <p class="title rl-ellipsis layui-font-12 layui-font-gray">
                                上地街道上地三街辅路金辉科技大厦
                            </p>
                            <div class="flex justify-between mb-4">
                                <div class="layui-font-12 layui-font-gray">
                                    2025-07-17 22:04:36
                                </div>
                                <div>
                                    <button class="layui-btn layui-btn-xs layui-btn-primary px-7"
                                        lay-on="look">查看</button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="layui-col-xs6 layui-col-sm6 layui-col-md4">
                    <div class="layui-card solid">
                        <div class="check_box_img">
                            <div class="layui-form check_box">
                                <input type="checkbox" name="AAA">
                            </div>
                            <div class="error_image">
                                <span>设备离线告警</span>
                                <img src="/assets/images/event/img-iot.png">
                            </div>
                        </div>
                        <div class="layui-card-body">
                            <div class="flex justify-between mb-4">
                                <p class="title rl-ellipsis">
                                    2025-07-17 22:04:36北京海淀上地街道项目上地街道记录仪0365（864504040800365）执法仪设备离线告警
                                    <span class="lighter layui-font-12 ml-2">记录仪0365</span>
                                </p>
                                <p class="activeStatus">
                                    待处理
                                </p>
                            </div>
                            <p class="title rl-ellipsis layui-font-12 layui-font-gray">
                                上地街道上地三街辅路金辉科技大厦
                            </p>
                            <div class="flex justify-between mb-4">
                                <div class="layui-font-12 layui-font-gray">
                                    2025-07-17 22:04:36
                                </div>
                                <div>
                                    <button class="layui-btn layui-btn-xs layui-btn-primary px-7"
                                        lay-on="look">查看</button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

            </div>
        </div>



    </div>


</div>
</div>
<script>
    layui.use(['form', 'table', 'tabs', 'miniPage', 'element'], function () {
        var $ = layui.jquery,
            form = layui.form,
            table = layui.table,
            tabs = layui.tabs,
            laydate = layui.laydate,
            layer = layui.layer,
            util = layui.util,
            element = layui.element,
            miniPage = layui.miniPage;
        /******************** 事件 start ********************/
        // 起始日期
        laydate.render({
            elem: '#date_period',
            type: 'datetime',
            range: true
        });
        util.on('lay-on', {
            //导出
            'look': function () {
                var content = miniPage.getHrefContent('page/eventManagement/eventManager/components/eventDetail.html');
            var openWH = miniPage.getOpenWidthHeight();
            var index = layer.open({
                title: '事件详情',
                type: 1,
                shade: 0.2,
                maxmin: false,
                shadeClose: true,
                area: ['1200px', 'auto'],
                content: content
            });
            }
        })
        /******************** 事件 end ********************/



        /******************** 渲染组件 start ********************/
        form.render(); //刷新select选择框渲染
        form.render('select'); //刷新select选择框渲染

        /******************** 渲染组件 end ********************/

        // 开启监听 折叠展开事件
        miniPage.listen()

    });
</script>